<template>
  <div class="main">
    <MainGrid>
      <template #tool-line>
        <a-upload
            name="excel"
            accept=".xls,.xlsx"
            action="/api/user/import"
            :show-upload-list="false"
            @change="handleImportUserChange"
        >
          <a-button type="primary">导入用户</a-button>
        </a-upload>
        <a-button type="primary" @click="handleAddUserClick">新增用户</a-button>
      </template>
      <template #main>
        <a-table :loading="isLoading" :pagination="paginationObj" :dataSource="dataSource" :columns="columns"
                 bordered>
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.dataIndex === 'gender'">
              {{ record.gender === 1 ? '男' : '女' }}
            </template>
            <template v-if="column.dataIndex === 'depart_name'">
              <a-tag color="green">{{ record.depart_name }}</a-tag>
            </template>
            <template v-if="column.dataIndex === 'operation'">
              <a-space>
                <a-button type="primary" @click="handleEdit(record)">修改</a-button>
                <a-button type="primary" @click="handleDelete(record)" danger>删除</a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </template>
    </MainGrid>
    <AddForm ref="addFormRef"/>
    <EditForm ref="editFormRef"/>
  </div>

</template>

<script setup lang="ts">
import {createVNode, onMounted, ref} from "vue";
import {message, Modal, UploadChangeParam} from "ant-design-vue";
import {IListItem} from "@/views/User/Main/types";
import {
  columns,
  dataSource,
  userStore,
  departStore,
  paginationObj,
  isLoading,
} from './config'
import AddForm from "@/views/User/Main/AddForm/AddForm.vue";
import EditForm from "@/views/User/Main/EditForm/EditForm.vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
import MainGrid from "@/components/MainGrid/MainGrid.vue";

// 初始化
onMounted(async () => {
  await userStore.requestUserListAction({
    current_page: 1,
    page_size: 10
  })
  await departStore.requestDepartListAction()
  isLoading.value = false
})

// 添加弹窗
const addFormRef = ref<InstanceType<typeof AddForm>>(null)
const handleAddUserClick = () => {
  addFormRef.value.handleAddUserModal(true)
}

// 修改弹窗
const editFormRef = ref<InstanceType<typeof EditForm>>(null)
const handleEdit = async (record: IListItem) => {
  await userStore.requestUserDetailAction({
    id: record.id
  })
  editFormRef.value.handleEditModal(true)
}

// 删除
const handleDelete = (record: IListItem) => {

  Modal.confirm({
    title: '确定要删除这个用户吗？',
    icon: createVNode(ExclamationCircleOutlined),
    okText: '确定',
    cancelText: "取消",
    onOk() {
      return new Promise((async (resolve, reject) => {
        const flag = await userStore.deleteUserAction({
          id: record.id
        })
        flag ? resolve("操作成功") : reject()
      }))
    },
  });
}

const handleImportUserChange = (info: UploadChangeParam) => {
  const {file} = info
  if (file.status === "done") {
    if (file.response.code === 0) {
      message.success(file.response.msg)
    }
    userStore.requestUserListAction({
      page_size: userStore.userInfo.page_info.page_size,
      current_page: userStore.userInfo.page_info.current_page
    })
  } else if (info.file.status === 'error') {
    message.error(`${info.file.name} file upload failed.`);
  }
}
</script>

<style lang="less" scoped>
.main {
  margin-top: 20px;

  .main-inner {
    border: 2px solid #f2f2f2;
    padding: 20px;

    .tool-line {
      margin-bottom: 20px;
    }
  }
}
</style>
